<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
          <el-input placeholder="订单编号" v-model="information.orderCode"></el-input>
      </el-col>
      <el-col :span="3">
          <el-input placeholder="用户手机" v-model="information.userPhone"></el-input>
      </el-col>
      <el-button type="primary" round @click="queryInformation()">查询</el-button>
    </el-row><br>

    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone">
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="orderCode"
        label="订单编号"
        width="100">
      </el-table-column>
      <el-table-column
        property="orderPrice"
        label="单价"
        width="80">
      </el-table-column>
      <el-table-column
        :formatter="formatterStatus"
        property="orderStatus"
        label="订单状态"
        width="120">
      </el-table-column>
      <el-table-column
        property="orderTime"
        label="下单时间"
        width="160">
      </el-table-column>
      <el-table-column
        property="orderTime"
        label="成交时间"
        width="160">
      </el-table-column>
      <el-table-column
        property="userRealName"
        label="用户姓名"
        width="80">
      </el-table-column>
      <el-table-column
        property="userPhone"
        label="用户电话"
        width="120">
      </el-table-column>
      <el-table-column
        property="userEmail"
        label="用户邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center">
        <template slot-scope="scope">
          <el-button type="primary"  size="small"
            @click="rowEdit(scope.row)">查看详情</el-button>

             <el-button circle icon="el-icon-edit-outline" type="primary" title="修改" size="small"
            @click="rowUpdateShow(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :page-size="page.pageSize"
      :total="page.totalCount"
      :current-page.sync="page.pageNo"
      @current-change="initTableData"
      layout="total, prev, pager, next, jumper">
    </el-pagination>
    <!--查看详情-弹出层-->
    <el-dialog
      :title="dialogName"
      :visible.sync="isShowEditDialog"
      width="830px"
      @close="dialogClose">
      <el-table
            :data="detailData"
            style="width: 100%">
            <el-table-column
              prop="filmImages"
              label="影片海报"
              width="180">
            </el-table-column>
            <el-table-column
              prop="filmName"
              label="影片名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="类别">
            </el-table-column>
            <el-table-column
              prop="filmPrice"
              label="单价"
              width="180">
            </el-table-column>
            <el-table-column
              prop="count"
              label="购买数量">
            </el-table-column>
            <el-table-column
        :formatter="formatterStatus"
        property="orderStatus"
        label="订单状态">
            </el-table-column>
          </el-table>
    </el-dialog>
<!--编辑-弹出层-->
<el-dialog
      :visible.sync="isShowOrderUpdate"
      width="830px"
     >
      <el-form
        ref="editForm"
        :model="order"
        label-width="55px"
       >
        <el-form-item label="订单编号"  prop="orderCode" readonly>
           <el-input :disabled="true" v-model="order.orderCode"></el-input>
        </el-form-item>

        <el-form-item label="总价" prop="orderPrice" readonly>
          <el-input :disabled="true" v-model="order.orderPrice"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userRealName" readonly>
          <el-input :disabled="true" v-model="order.userRealName"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" prop="userPhone" readonly>
          <el-input :disabled="true" v-model="order.userPhone"></el-input>
        </el-form-item>

        <el-form-item label="状态">
           <el-select v-model="order.orderStatus" placeholder="请选择订单状态">
            <el-option label="待支付" value="1"></el-option>
              <el-option label="已支付" value="2"></el-option>
       </el-select>
       </el-form-item>
        <el-form-item label="下单时间" prop="orderTime" readonly>
          <el-input :disabled="true" v-model="order.orderTime"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="rowUpdate(order.orderId)" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="cancelEdit" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios';
  export default {
    name: "Table",
    data() {
      return {
        information:{
           orderCode:'', //需要查询的订单编号
           userPhone:'', //需要查询的用户姓名
        },
        detailData: [], //订单详情列表
        dialogName: '' , //编辑框显示名称
        page:{ //分页参数
           pageNo : 1,
           pageSize: 2,
           totalCount: 0
        },
        order:{
          orderId:null,
          orderCode:'',
          orderPrice:'',
          userRealName:'',
          userPhone:'',
          orderStatus:'',
          orderTime:''
        },
        tableData: [],
        isShowEditDialog: false ,
        isShowOrderUpdate:false
      }
    },
    methods: {
      formatterStatus(row, column, cellValue, index){
          var st = '未知' ;
          switch(cellValue){
             case 1:
                st = "待支付";
                this.order.orderStatus=1;
                break ;
             case 2:
                st = "已支付";
                this.order.orderStatus=2;
                break ;
          }
          return st ;
      },

      handleRowClick(row, event, column) {

        // 仅选中当前行
        //this.setCurRowChecked(row);
        this.setCurRowChecked;
      },
      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {

        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      //显示查看订单页面
      rowEdit(row) {

       this.dialogName = '订单详情'
       this.detailData = row.orderDetailVOList
       this.isShowEditDialog = true;
      },
      //显示编辑页面
      rowUpdateShow(index, row) {
       this.dialogName = '编辑订单'
       this.order = row
       this.isShowOrderUpdate = true;
      },
      cancelEdit(){
        this.isShowEditDialog = false;
        this.isShowOrderUpdate=false;
      },

      rowUpdate(orderId) {

     this.$refs.editForm.validate(isValid => {

     if (!isValid) return;
     //axios.defaults.withCredentials = true; //意思是携带cookie信息,保持session的一致性
    // 保存编辑后的数据
    console.log("之前id: "+this.order.orderId)
    axios.get('http://localhost:8082/order/updateOrderStatus',{params:{id:this.order.orderId, status:this.order.orderStatus}})
      .then(res =>{
         if(res.data.code == 200){
            console.log("定单id: "+orderId)
               this.$message.success('修改成功!');
               this.initTableData();
               this.cancelEdit();
         }else{
          this.$message.success('修改失败!');
         }
      })
});
},
      queryInformation(){
          console.log(this.information)
            // 保存编辑后的数据
            axios.get('http://localhost:8082/order/getInformation',{params:this.information})

              .then(res =>{
                  if(res.data.code == 200){
                      this.page.totalCount = res.data.data.total
                      this.tableData = res.data.data.list
                      this.detailData=res.data.data.list.orderDetailVOList
                  }
              })
      },
      //初始化table数据
      initTableData(){
        console.log("pageNo :  " + this.page.pageNo)

         axios.get('http://localhost:8082/order/getPage',{params: this.page})
              .then(res =>{
                   if(res.data.code == 200){
                      this.page.totalCount = res.data.data.total
                      this.tableData = res.data.data.list
                      this.detailData=res.data.data.list.orderDetailVOList
                   }
              })
      },

    },
    mounted(){
       this.initTableData()
    }
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
